import React from 'react';
import '@/assets/css/login.css';

// 注册登录页
const Login = () => {
  // 注册登录按钮
  const Footer = () => {
    return (
      <React.UI.Button block type='submit' color='primary' size='large'>
        注册登录
      </React.UI.Button>
    )
  }

  // 提交表单
  const OnSubmit = async (values: {
    // 声明类型
    mobile: string,
    password: string
  }) => {
    // 发起请求
    const result = await React.Http.post('/business/login', values);
    // 处理请求结果
    if (result.code === 1) {
      React.success(result.msg, () => {
        // 存储登录信息
        React.Cookies.save('business', result.data, { path: '/' });
        React.business = result.data;
        // 跳转到business页面
        React.navigate(result.url);
      });
    } else {
      // 返回错误信息
      React.fail(result.msg);
    }
  }

  return (
    <>
      <div className="headers">
        <div className="userinfo">
          <div className="avatar"></div>
        </div>
        <div className="corrugated">
          <div className="wave_top wave_item"></div>
          <div className="wave_middle wave_item"></div>
        </div>
      </div >

      <div className="login">
        <React.UI.Form
          onFinish={OnSubmit}
          footer={<Footer />}
        >
          <React.UI.Form.Item
            name='mobile'
            label='手机号'
            rules={[
              { required: true, message: '手机号不能为空' },
              { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
            ]}
          >
            <React.UI.Input placeholder='请输入手机号' />
          </React.UI.Form.Item>

          <React.UI.Form.Item
            name='password'
            label='密码'
            rules={[
              { required: true, message: '密码不能为空' }
            ]}
          >
            <React.UI.Input type="password" placeholder='请输入密码' />
          </React.UI.Form.Item>
        </React.UI.Form>
      </div>
    </>
  )
}

export default Login;